<template>
  <div>
    <el-dialog
      title="选中养护任务"
      :visible.sync="dialogTableVisible"
      :close-on-click-modal="false"
      width="900px">
      <el-form :model="queryParams" ref="queryForm" :inline="true">
        <el-form-item label="任务单号" >
          <el-input
            v-model="queryParams.code"
            placeholder="请输入任务单号"
            clearable
            size="small"
          />
        </el-form-item>
        <el-form-item label="计划名称" >
          <el-input
            v-model="queryParams.name"
            placeholder="请输入计划名称"
            clearable
            size="small"
          />
        </el-form-item>
        <el-form-item label="设备名称" >
          <el-input
            v-model="queryParams.name"
            placeholder="请输入设备名称"
            clearable
            size="small"
          />
        </el-form-item>
        <el-form-item label="截止日期" >
          <el-date-picker
            size="small"
            v-model="selectDate"
            value-format="yyyy-MM-dd"
            type="daterange"
            range-separator="-"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          ></el-date-picker>
        </el-form-item>


        <el-form-item label="" >
          <el-checkbox v-model="queryParams.checked" >显示已过期</el-checkbox>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" size="mini" @click="">搜索</el-button>
        </el-form-item>
      </el-form>
      <el-table v-loading="loading" :data="chanpinList"
                stripe
                @cell-click="cellClick"
                highlight-current-row>
        <el-table-column align="center" type="index" label="序号"  width="55"  />
        <el-table-column align="center" label="任务单号" property="code" width="150" ></el-table-column>
        <el-table-column align="center" label="计划名称"   property="name" :show-overflow-tooltip="true"  ></el-table-column>
        <el-table-column align="center" label="设备名称" property="danwei" :show-overflow-tooltip="true" width="150" ></el-table-column>
        <el-table-column align="center" label="存放地址"  property="fenlei" width="100" ></el-table-column>
        <el-table-column align="center" label="开始日期"  property="fenlei" width="100" ></el-table-column>
        <el-table-column align="center" label="截止日期"  property="fenlei" width="100" ></el-table-column>
        <el-table-column align="center" label="任务状态"  property="fenlei" width="100" ></el-table-column>
      </el-table>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="1"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="10"
        layout="total, sizes, prev, pager, next, jumper"
        style="margin-top: 15px"
        :total="40">
      </el-pagination>


      <span slot="footer" class="dialog-footer">
        <el-button type="primary"  size="mini" @click="determine">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
  export default {
    props: ['routerData'],
    name: "Role",
    data() {
      return {
        selectDate:[],
        loading:false,
        dialogTableVisible:true,
        //产品查询数据
        queryParams:{
          code:'',
          name:'',
          checked:false,
          shebeichecked:false,//带出设备
        },
        newxuanz:'',//当前选中的
        deptOptions:[],//树形图数据
        defaultProps: {
          children: "children",
          label: "label"
        },
        //产品列表数据
        chanpinList:[
          {code:'HC2018121300111',name:'运输车',danwei:'辆',fenlei:'车辆'},
          {code:'HC2018121300112',name:'运输车',danwei:'辆',fenlei:'车辆'},
          {code:'HC2018121300113',name:'运输车',danwei:'辆',fenlei:'车辆'},
          {code:'HC2018121300114',name:'运输车',danwei:'辆',fenlei:'车辆'}
        ],

      };
    },
    components:{

    },
    watch: {
      dialogTableVisible: function () {
        this.dialogTableVisible = true;//始终让他为true;
        this.cancel();//隐藏
      },
    },
    created() {
      console.log('养护',this.routerData)
    },
    methods: {
      //行点击事件
      cellClick:function(row,column,event,cell){
        console.log('row',row)
        this.newxuanz = row.code
      },
      //确定
      determine:function(){
        console.log('确定')

        this.$emit('callback',this.newxuanz)//将submitModel的值传给父组件
      },
      //隐藏
      cancel:function(){
        this.determine()
      },
      //分页
      handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
      },
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
      },


    }
  };
</script>
<style >





</style>
